<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<public-module></public-module>
		<view class="group">
			<button class="cell u-flex" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="title u-flex-m">头像</view>
				<image :src="avatar" class="avatar"></image>
				<u-icon name="arrow-right" :size="14" color="#333"></u-icon>
			</button>
			<view class="cell u-flex">
				<view class="title u-flex-m">昵称</view>
				<input class="text" type="nickname" :value="name" placeholder="请输入您的昵称"  @change="getNickname">				
				<!-- <view class="text">{{name}}</view> -->
			</view>
		</view>
		<view class="group">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="cell u-flex" @click="checkUpData">
				<view class="title u-flex-m">检查更新</view>
				<!-- #ifdef APP-PLUS -->
				<view class="text" v-if="versionInfo.versionName">{{ versionInfo.versionName }}</view>
				<!-- #endif -->
				<u-icon name="arrow-right" :size="14" color="#333"></u-icon>
			</view>

			<!-- #endif -->
			<!--            <view class="cell u-flex" @click="getPhone">
                <view class="title u-flex-m">手机号</view>
                <view class="text">{{telephone || '去绑定'}}</view>
                <u-icon name="arrow-right" :size="14" color="#333"></u-icon> -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- 微信手机授权 -->
			<!-- <button class="itemButton" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"></button> -->
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<!-- 支付宝手机授权 -->
			<!-- <button class="itemButton" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="decryptPhoneNumber" @error="onAuthError"></button> -->
			<!-- #endif -->
			<!-- </view> -->

			<!-- #ifdef APP-PLUS -->
			<view class="cell u-flex">
				<view class="title u-flex-m">缓存大小</view>
				<view class="text">{{ fileSizeString }}</view>
				<!-- app删除缓存 -->
				<view class="u-p-l-14" @tap.stop="appClearCache">
					<u-icon name="trash" :size="20" color="#888"></u-icon>
				</view>
			</view>
			<!-- #endif -->
			<!--            <view class="cell u-flex">
                <view class="title u-flex-m">问题反馈</view>
                <u-icon name="arrow-right" :size="14" color="#333"></u-icon>
            </view>
            <view class="cell u-flex">
                <view class="title u-flex-m">关于我们</view>
                <u-icon name="arrow-right" :size="14" color="#333"></u-icon>
            </view> -->
		</view>
		<view class="u-p-t-50 u-p-l-30 u-p-r-30">
			<u-button shape="square" type="error" @click="loginOut">退出登录</u-button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { setUserInfo } from '@/apis/user_callback.js';
import store from '@/store';

// #ifdef MP
import { getPhoneInfo } from '@/config/login';
import { mpUpData } from '@/config/common';
// #endif
// #ifdef APP-PLUS
import { formatSize, clearCache } from '@/config/common';
import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
	computed: {
		...mapState(['userInfo'])
	},
	data() {
		return {
			fileSizeString: '0B', //App缓存大小
			versionInfo: {}, //版本信息
			telephone: this.$store.state.userInfo.telephone || '',
			name: this.$store.state.userInfo.name || '',
			avatar: this.$store.state.userInfo.avatar || '',
			userId: this.$store.state.userInfo.id || '',
			userInfos: this.$store.state.userInfo || ''
		};
	},
	onLoad() {
		// #ifdef APP-PLUS
		this.appFormatSize(); //计算app缓存大小
		this.getCurrentNo(); //获取版本号
		// #endif
	},
	onShow() {
		this.bindPhoneSuccess();
	},
	methods: {
		...mapMutations(['emptyUserInfo', 'setUserInfo']),
		onJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		loginOut() {
			var that = this;
			uni.showModal({
				title: '退出登录',
				content: '你确定退出登录吗？',
				success(res) {
					if (res.confirm) {
						that.emptyUserInfo();
						setTimeout(() => {
							uni.navigateBack({ delta: 1 });
						}, 500);
					} else if (res.cancel) {
					}
				}
			});
		},
		// 修改头像
		upAvatar() {
			var that = this;
			uni.chooseImage({
				count: 1,
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					// uni.$u.http.upload('api/upload/img', {
					//     filePath:tempFilePaths[0],
					//     name:'avatar',
					// }).then(res => {
					//     that.avatar = res
					// })
				}
			});
		},
		// 修改微信头像
		onChooseAvatar(e) {
			store.commit('setLoadingShow', true);
			let that = this
			//该图片需要上传到自己服务器--此处没做处理
			this.avatar = e.detail.avatarUrl;
			if (this.avatar) {
				setUserInfo(
					{ avatar: this.avatar, telephone: this.telephone },
					() => {
						that.userInfos["avatar"] = that.avatar
						store.commit('setUserInfo',that.userInfos)
						this.$refs.uToast.show({
							type: 'success',
							position: 'top',
							title: '提示',
							message: '修改成功'
						});
						this.$emit('down');
						store.commit('setLoadingShow', false);
					},
					(err) => {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							title: '错误',
							message: '修改失败'
						});
						store.commit('setLoadingShow', false);
					}
				);
			} else {
				store.commit('setLoadingShow', false);
				this.$refs.uToast.show({
					type: 'error',
					position: 'top',
					title: '提示',
					message: '获取头像失败'
				});
			}
		},
		getNickname(e){
			this.name = e.detail.value
			store.commit('setLoadingShow', true);
			let that = this
			//该图片需要上传到自己服务器--此处没做处理
			if (this.name) {
				setUserInfo(
					{ name: this.name, telephone: this.telephone },
					() => {
						that.userInfos["name"] = that.name
						store.commit('setUserInfo',that.userInfos)
						
						this.$refs.uToast.show({
							type: 'success',
							position: 'top',
							title: '提示',
							message: '修改成功'
						});
						this.$emit('down');
						store.commit('setLoadingShow', false);
					},
					(err) => {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							title: '错误',
							message: '修改失败'
						});
						store.commit('setLoadingShow', false);
					}
				);
			} else {
				store.commit('setLoadingShow', false);
				this.$refs.uToast.show({
					type: 'error',
					position: 'top',
					title: '提示',
					message: '修改名称失败'
				});
			}
		},
		// 检查更新
		checkUpData() {
			// #ifdef MP
			this.inspectMpUpData();
			// #endif
			// #ifdef APP-PLUS
			this.appUpData();
			// #endif
		},
		getPhone() {
			// #ifdef H5
			this.openBindPhone(1);
			// #endif
		},
		//檢查小程序更新
		inspectMpUpData() {
			// #ifdef MP
			var that = this;
			mpUpData((res) => {
				if (res.type === 1) {
					//请求完新版本信息的回调
					if (!res.data.hasUpdate) {
						that.$u.toast('当前没有新版发布');
					}
				} else if (res.type === 2) {
					// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
					uni.showModal({
						title: '提示',
						content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
					});
				}
			});
			// #endif
		},
		appUpData() {
			APPUpdate(); //检测app更新
		},
		// App计算缓存
		async appFormatSize() {
			let that = this;
			formatSize((res) => {
				that.fileSizeString = res;
			});
		},
		// App清理缓存
		appClearCache() {
			let that = this;
			clearCache(this.fileSizeString).then(() => {
				that.appFormatSize();
			});
		},
		//授权手机号
		decryptPhoneNumber(e) {
			var that = this;
			// #ifdef MP-WEIXIN
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				if (e.detail.iv) {
					var authorizeInfo = e.detail;
					//请去getPhoneInfo方法中使用您的接口绑定信息
					getPhoneInfo(
						authorizeInfo,
						(info) => {
							//绑定成功后--保存您的信息
							// var userInfo = {
							//     mobile: res.mobile,
							// };
							// that.setUserInfo(userInfo);
							// that.bindPhoneSuccess()
							setTimeout(() => {
								uni.$u.toast('绑定成功');
							}, 100);
						},
						(err) => {
							that.openBindPhone(2, '获取手机号失败,请使用手机号登录');
						}
					);
				} else {
					that.openBindPhone(2, '获取手机号失败,请使用手机号登录');
				}
			} else {
				// 拒绝
				this.onAuthError();
			}
			// #endif

			// #ifdef MP-ALIPAY
			uni.getPhoneNumber({
				success: (res) => {
					//请去getPhoneInfo方法中使用您的接口绑定信息
					getPhoneInfo(
						res.response,
						(res) => {
							//绑定成功后--保存您的信息
							// var userInfo = {
							//     mobile: res.mobile,
							// };
							// that.setUserInfo(userInfo);
							// that.bindPhoneSuccess()
							setTimeout(() => {
								uni.$u.toast('绑定成功');
							}, 100);
						},
						(err) => {
							that.openBindPhone(2, '获取手机号失败,请使用手机号登录');
						}
					);
				},
				fail: (res) => {
					that.openBindPhone(2, '获取手机号失败,请使用手机号登录');
				}
			});
			// #endif
		},
		// 拒绝手机授权
		onAuthError(e) {
			this.openBindPhone(2, '您已拒绝或授权失败，可使用手机号绑定~');
		},
		// 手机号绑定成功回调方法
		async bindPhoneSuccess() {
			this.mobile = this.$store.state.userInfo.mobile || '';
		},
		openBindPhone(type = 1, content) {
			var that = this;
			if (type == 1) {
				that.onJump('/pages/user/login'); //绑定号码可以自定义页面或者弹窗
			} else if (type == 2) {
				uni.showModal({
					title: '温馨提示',
					content: content,
					success(res) {
						if (res.confirm) {
							that.onJump('/pages/user/login'); //绑定号码可以自定义页面或者弹窗
						}
					}
				});
			}
		},
		// 获取当前应用的版本号
		async getCurrentNo(callback) {
			var that = this;
			// 获取本地应用资源版本号
			plus.runtime.getProperty(plus.runtime.appid, function (inf) {
				that.versionInfo = {
					versionCode: inf.versionCode,
					versionName: inf.version
				};
			});
		}
	}
};
</script>

<style lang="scss">
// page {
//     background: #fff;
// }
.group {
	padding: 0 30rpx;
	margin-top: 20rpx;
	background: #fff;
}
.cell {
	position: relative;
	// line-height: normal;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #eee;
	.title {
		text-align: start;
		font-size: 30rpx;
		color: #333;
	}
	.text {
		text-align: end;
		font-size: 28rpx;
		color: #888;
	}
	.itemButton {
		border-radius: 0;
		text-align: left;
		opacity: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	&:last-child {
		border-bottom: none;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 10rpx;
	}
}
</style>
